<?php

/* @var $this yii\web\View */
use yii\helpers\Url;
use common\helpers\Render;
use common\models\User;

$this->title = '登陆';
?>

<style>
    #pg-contenter {margin:0;height:580px;padding:80px 0;background:url(<?= Url::to('@web/web/static/image/register-banner.jpg') ?>) center no-repeat;}
    #register-contain {float:right;width:260px;margin:80px 0;font-size:14px;padding:30px;background-color:#fff;-webkit-background-clip:padding-box;background-clip:padding-box;border-radius:2px;box-shadow:0 0 5px rgba(0,0,0,0.5);}
    #register-title {height:25px;line-height:25px;margin-bottom:20px;color:#666;font-size:20px;}
    #register-title span {float:right;line-height:28px;font-size:14px;}
    #register-title span a {color:#f00;}
    #register-tags {height:40px;line-height:40px;font-size:16px;background-color:#ddd;cursor:pointer;}
    #register-tags #designer,
    #register-tags #employer {float:left;width:50%;text-align:center;}
    #register-tags #designer.active,
    #register-tags #employer.active {color:#fff;background-color:#f00;}
    #captcha-panel {position:relative;}
    #get-captcha {position:absolute;top:5px !important;right:5px;height:30px;width:90px;font-size:12px;cursor:pointer;}

    .form-item {position:relative;}
    .form-item .input-title {position:absolute;top:0;left:0;width:40px;height:40px;line-height:40px;text-align:center;background-color:#eee;border-radius:3px 0 0 3px;}
    .form-item .flyer-button,
    .form-item .flyer-input {width:100%;height:40px;margin-bottom:20px;padding:0 10px;font-size:14px;border:none;border-radius:3px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;box-shadow:0 0 5px rgba(0,0,0,.4);}
    .form-item .flyer-input {padding-left:50px;}
    .form-item .flyer-button {margin-bottom:0;}

    .has-error .flyer-input {box-shadow:0 0 5px #cf6666;}
    .has-pass .flyer-input {box-shadow:0 0 5px #3c763d;}
</style>
<div class="contenter clear">
    <div id="register-contain">
        <div id="register-title">账户登陆<span>还没有网账号？<a href="<?= Url::to('@web/user/register') ?>">立即注册</a></span></div>
        <div id="register-tags">
            <div class="active" id="designer" data-role="<?= User::RoleDesigner ?>">设计师</div>
            <div id="employer" data-role="<?= User::RoleEmployer ?>">雇主</div>
        </div>
        <form class="mt-20px pane" id="flyer-register" action="<?= Url::to('@web/user/login') ?>" method="post">
            <div class="form-item checker">
                <div class="input-title fs-24px"><i class="icon-mobile-phone"></i></div>
                <div class="input-block"><input class="flyer-input" name="username" type="text" placeholder="手机号."></div>
            </div>
            <div class="form-item checker">
                <div class="input-title fs-18px"><i class="icon-lock"></i></div>
                <div class="input-block"><input class="flyer-input" name="password" type="password" placeholder="密码."></div>
            </div>
            <div class="form-item mt-10px">
                <div class="input-block">
                    <span for="remember"><input type="checkbox" id="remember" name="remember" value="1" checked> 下次自动登陆？</span>
                    <a class="fr cl-red" href="<?= Url::to('@web/user/forget-password') ?>">忘记密码？</a>
                </div>
            </div>
            <div class="form-item mt-10px">
                <div class="inline-block w-p100">
                    <button class="flyer-button normal" id="login-button">登陆</button>
                    <input name="role" type="hidden" value="<?= User::RoleDesigner ?>">
                    <textarea id="flyer-register-json" data-form="#flyer-register" style="display:none;"><?= $relate ?></textarea>
                </div>
            </div>
            <input type="hidden" name="_csrf" value="<?=Yii::$app->request->getCsrfToken() ?>">
        </form>
    </div>
</div>

<script src="<?= Render::static('flyer/checker.class.js') ?>"></script>
<script src="<?= Render::static('flyer/tableHandler.class.js') ?>"></script>
<script>
    $(document).ready(function() {
        // 发送验证码操作
        $('#designer, #employer').bind('click', function() {
            if($(this).hasClass('active')) {
                return true;
            }
            $(this).siblings().removeClass('active');
            $(this).addClass('active');
            $('input[name=role]').val($(this).data('role'));
        });

        // 表单数据验证
        (new checker).init({ ruleDom: '#flyer-register-json' });

        // 异常提示
        if('<?= Yii::$app->controller->status['code'] ?>' !== '<?= SuccessCode ?>') {
            layer.msg('<?= Yii::$app->controller->status['message'] ?>', {shift: 6});
        }
    });
</script>